<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@include file="../tld.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="../../../static/sass/common/ydui.css" />
    <link rel="stylesheet" href="../../../static/sass/common/dropload.css" />
    <link rel="stylesheet" href="../../../static/stylesheets/shopping_car/shopping_car.css" />
    <!-- 引入自适应解决方案类库 -->
    <script src="../../../static/scripts/libs/ydui.flexible.js"></script>
</head>

<body>
    <div class="g-flexview">
        <!-- 主体内容开始 -->
        <section class="content_box content" style="margin-bottom: 50px;">
            <div class="lists">
            <c:if test="${fn:length(cart) > 0}">
                <c:forEach items="${cart}" var="item" varStatus="vs">
                	<c:set var="lastId" value="${item.id}"></c:set>
                	<div class="product-box">
                    <i class="icon-delete delete" buyType="${item.buyType }" id="${item.id}"></i>
                    <div class="radio">
                        <div class="ico_checkbox" data="${item.id }" goodsId="${item.goodsId }" buyType="${item.buyType }" id="${item.id}" price="${item.discountUnitPrice}" num="${item.buyNum}"></div>
                    </div>
                    <div class="product-img">
                        <img class="icon" src="${baseImgUrl}${item.image }" alt="">
                    </div>
                    <div class="product-item">
                        <div class="product-title">
                            ${item.goodsName }
                        </div>
                        <div class="product-price">
                            ￥${item.discountUnitPrice }
                        </div>
                    </div>
                    <div class="product-num">
                        <span class="m-spinner" >
                            <a href="javascript:;" class="J_Del" buyType="${item.buyType }" data="${item.id }"></a>
                            <input type="text" class="J_Input" value="${item.buyNum }" buyType="${item.buyType }" data="${item.id }" placeholder=""/>
                            <a href="javascript:;" class="J_Add"></a>
                        </span>
                    </div>
                </div>
                </c:forEach>
            </c:if>
                
            </div>
        </section>

        <!-- 底部导航开始 -->
        <footer class="footer">
            <div class="accounts-box">
                <div class="radio">
                    <div class="ico_checkbox" id="all_check"></div>
                </div>
                <div class="selected-all-text">
                    全选
                </div>
                <div class="total-price">
                    总价： <span>￥<span id="totalmoney">0.00</span></span>
                </div>
                <div class="sub-btn">
                    结算(<span id="totalPay">0</span>)
                </div>
            </div>
        </footer>
        <!-- 底部导航结束 -->



        <!-- 没有数据时 -->
        <!-- <div class="empty-box">
            <div class="shopping_car">
                <img class="car"  src="../../../static/assets/icon/shopping_car.png" alt="">
            </div>
            <div class="empty_text">
                目前没有相关商品
            </div>
        </div> -->
        <!-- 没有数据时的底部导航开始 -->
        <!-- <footer class="m-tabbar">
            <a href="#" class="tabbar-item tabbar-active">
                <span class="tabbar-icon">
                    <i class="icon-home-outline"></i>
                </span>
                <span class="tabbar-txt">首页</span>
            </a>
            <a href="#" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-shopcart"></i>
                </span>
                <span class="tabbar-txt">购物车</span>
            </a>
            <a href="#" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-ucenter-outline"></i>
                </span>
                <span class="tabbar-txt">我的</span>
            </a>
        </footer> -->
        <!-- 底部导航结束 -->
    </div>
    <!-- 引入jQuery 2.0+ -->
    <script src="../../../static/scripts/libs/jquery.min.js"></script>
    <!-- 引入YDUI脚本 -->
    <script src="../../../static/scripts/libs/ydui.js"></script>
    <script src="../../../static/scripts/libs/dropload.js"></script>
    <script src="../../../static/scripts/apps/shopping_car.js"></script>
</body>
<script>
    $(function () {
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 10;
		
        var lastId = ${lastId};
        // dropload
        $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
                domUpdate: '<div class="dropload-update">↑释放更新-自定义内容</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
                domNoData: '<div class="dropload-noData">暂无数据-自定义内容</div>'
            },
            //下拉
            loadUpFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: '${base}/cart/getcarts?uid='+uid+'&which=1&size=20&lastId=0',
                    dataType: 'json',
                    success: function (resp) {
                        var result = '';
                        var code = resp.code;
                        var data = resp.data;
                        if(code != null && code == 0 && data.length > 0){
	                        for (var i = 0; i < data.length; i++) {
	                            result += '<div class="product-box">';
	                            result += '    <i class="icon-delete delete" buyType="'+data[i].buyType+'" id="'+data[i].id+'"></i>';
	                            result += '    <div class="radio">';
	                            result += '        <div class="ico_checkbox" goodsId="'+data[i].goodsId+'" data="'+data[i].id+'" buyType="'+data[i].buyType+'" id="'+data[i].id+'" price="'+data[i].discountUnitPrice+'" num="'+data[i].buyNum+'"></div>';
	                            result += '    </div>';
	                            result += '    <div class="product-img">';
	                            result += '        <img class="icon" src="${baseImgUrl}' + data[i].image + '" alt="">';
	                            result += '    </div>';
	                            result += '    <div class="product-item">';
	                            result += '        <div class="product-title">';
	                            result += '            ' + data[i].goodsName;
	                            result += '        </div>';
	                            result += '        <div class="product-price">';
	                            result += '            ￥'+data[i].discountUnitPrice;
	                            result += '        </div>';
	                            result += '    </div>';
	                            result += '    <div class="product-num">';
	                            result += '        <span class="m-spinner">';
	                            result += '            <a href="javascript:;" class="J_Del" buyType="'+data[i].buyType+'" data="'+data[i].id+'"></a>';
	                            result += '            <input type="text" value="'+data[i].buyNum+'" buyType="'+data[i].buyType+'" data="'+data[i].id+'" class="J_Input" placeholder=""/>';
	                            result += '            <a href="javascript:;" class="J_Add"></a>';
	                            result += '        </span>';
	                            result += '    </div>';
	                            result += '</div>';
	                            lastId = data[i].id;
	                        }
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            $('.lists').html("").prepend(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            page = 0;
                            // 解锁loadDownFn里锁定的情况
                            me.unlock();
                            me.noData(false);
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn: function (me) {
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: '${base}/cart/getcarts?uid='+uid+'&which=' + -1 + '&size=' + 20 + '&lastId='+lastId,
                    dataType: 'json',
                    success: function (resp) {
                    	var result = '';
                        var code = resp.code;
                        var data = resp.data;
                        if(code != null && code == 0 && data.length > 0){
	                        for (var i = 0; i < data.length; i++) {
	                            result += '<div class="product-box">';
	                            result += '    <i class="icon-delete delete" buyType="'+data[i].buyType+'" id="'+data[i].id+'"></i>';
	                            result += '    <div class="radio">';
	                            result += '        <div class="ico_checkbox" goodsId="'+data[i].goodsId+'" data="'+data[i].id+'" buyType="'+data[i].buyType+'" id="'+data[i].id+'" price="'+data[i].discountUnitPrice+'" num="'+data[i].buyNum+'"></div>';
	                            result += '    </div>';
	                            result += '    <div class="product-img">';
	                            result += '        <img class="icon" src="${baseImgUrl}' + data[i].image + '" alt="">';
	                            result += '    </div>';
	                            result += '    <div class="product-item">';
	                            result += '        <div class="product-title">';
	                            result += '            ' + data[i].goodsName;
	                            result += '        </div>';
	                            result += '        <div class="product-price">';
	                            result += '            ￥'+data[i].discountUnitPrice;
	                            result += '        </div>';
	                            result += '    </div>';
	                            result += '    <div class="product-num">';
	                            result += '        <span class="m-spinner">';
	                            result += '            <a href="javascript:;" class="J_Del" data="'+data[i].id+'"></a>';
	                            result += '            <input type="text" value="'+data[i].buyNum+'" buyType="'+data[i].buyType+'" data="'+data[i].id+'" class="J_Input" placeholder=""/>';
	                            result += '            <a href="javascript:;" class="J_Add"></a>';
	                            result += '        </span>';
	                            result += '    </div>';
	                            result += '</div>';
	                            lastId = data[i].id;
	                            
	                        }
                        }
                            // 如果没有数据
                        else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            // 插入数据到页面，放到最后面
                            $('.lists').append(result);
                            // 每次数据插入，必须重置
                            me.resetload();
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold: 50
        });
    });
    
    //删除确认
    var dialog = window.YDUI.dialog;
    $(document).on('click', '.delete', function(){
        let that = $(this);
        var id = "";
        $(".ico_checkbox_on").each(function(i){
        	var data = $(this).attr("data");
        	var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 
        	if(i == 0){
        		if (re.test(data)) {
	        		id = data;
        		}
        	}else{
        		if (re.test(data)) {
	        		id += ","+data;
        		}
        	}
        });
        if(id == ""){
        	alert("请选择要删除的购物车商品");
        	return false;
        }
        /* 普通确认框 */
        dialog.confirm('确定删除吗？','', function () {
            $.ajax({
                type: 'POST',
                url: '${base}/cart/delete?ids='+id,
                dataType: 'json',
                success: function (resp) {
                	 dialog.toast('已经删除了', 'none', 1000);
		            location.reload();
                },
                error: function (xhr, type) {
                	alert('删除失败');
                }
            });
        });
        
    })
    
    //单选全选
    $('.lists').on('click', '.ico_checkbox', function(){
        
        let len = $('.lists .ico_checkbox').length;
        let checkLen = $('.lists .ico_checkbox_on').length;
        
        let total = 0;
        if($(this).hasClass('ico_checkbox_on')){
            $(this).removeClass('ico_checkbox_on');
            $("#totalmoney").html(Number($("#totalmoney").html()) - Number($(this).attr("price"))*Number($(this).attr("num")));
            $("#totalPay").html(Number($("#totalPay").html()) - Number($(this).attr("price"))*Number($(this).attr("num")));
            checkLen = $('.lists .ico_checkbox_on').length;
            if(checkLen < len){
                $('#all_check').removeClass('ico_checkbox_on');
            }
        }else{
            $(this).addClass('ico_checkbox_on');
            $("#totalmoney").html(Number($("#totalmoney").html()) + Number($(this).attr("price"))*Number($(this).attr("num")));
            $("#totalPay").html(Number($("#totalPay").html()) + Number($(this).attr("price"))*Number($(this).attr("num")));
            checkLen = $('.lists .ico_checkbox_on').length;
            if(checkLen >= len){
                $('#all_check').addClass('ico_checkbox_on');
            }
        }
    })
    $('#all_check').click(function(){
        if($(this).hasClass('ico_checkbox_on')){
            $(this).removeClass('ico_checkbox_on');
            $('.lists').find('.ico_checkbox').removeClass('ico_checkbox_on');
            $(".lists .ico_checkbox").each(function(){
            	$("#totalmoney").html(Number($("#totalmoney").html()) - Number($(this).attr("price"))*Number($(this).attr("num")));
            	$("#totalPay").html(Number($("#totalPay").html()) - Number($(this).attr("price"))*Number($(this).attr("num")));
    		});
        }else{
            $(this).addClass('ico_checkbox_on');
            $('.lists').find('.ico_checkbox').addClass('ico_checkbox_on');
           	$("#totalmoney").html(0);
            $(".lists .ico_checkbox").each(function(){
            	$("#totalmoney").html(Number($("#totalmoney").html()) + Number($(this).attr("price"))*Number($(this).attr("num")));
            	$("#totalPay").html(Number($("#totalPay").html()) + Number($(this).attr("price"))*Number($(this).attr("num")));
    		});
        }
        
    })
    
    //加减
    $('.lists').on('click', '.J_Add', function(){
        let inp = $(this).parent().find('.J_Input');
        let num = inp.val();
        num ++;
        inp.val(num);
        $(this).parent().parent().parent().find('.radio').find('.ico_checkbox').attr('num',num);
        var $this = $(this).parent().parent().parent().find('.radio').find('.ico_checkbox');
        if($this.hasClass('ico_checkbox_on')){
	        $("#totalmoney").html(Number($("#totalmoney").html()) + Number($this.attr("price")));
	        $("#totalPay").html(Number($("#totalPay").html()) + Number($this.attr("price")));
        }
    })
    $('.lists').on('click', '.J_Del', function(){
        let that = $(this);
        var id = that.attr("data");
        let inp = $(this).parent().find('.J_Input');
        let num = inp.val();
        num --;
        inp.val(num);
        if(num == 0){
            dialog.confirm('确定删除吗？','', function () {
            	$.ajax({
                    type: 'POST',
                    url: '${base}/cart/delete?ids='+id,
                    dataType: 'json',
                    success: function (resp) {
                    	 dialog.toast('已经删除了', 'none', 1000);
    		            that.parent().parent().parent().remove();
                    },
                    error: function (xhr, type) {
                    	alert('删除失败');
                    }
                });
            });
        }
        $(this).parent().parent().parent().find('.radio').find('.ico_checkbox').attr('num',num);
        var $this = $(this).parent().parent().parent().find('.radio').find('.ico_checkbox');
        if($this.hasClass('ico_checkbox_on')){
	        $("#totalmoney").html(Number($("#totalmoney").html()) - Number($this.attr("price")));
	        $("#totalPay").html(Number($("#totalPay").html()) - Number($this.attr("price")));
        }
    })
    
    $(".J_Input").each(function(){
    	$(this).on("input propertychange", function() {  
    		var $this = $(this);
    		var id=$this.attr("data");
    		num = $this.val(); 
    		if(num != '' && num == 0){
                dialog.confirm('确定删除吗？','', function () {
                	$.ajax({
                        type: 'POST',
                        url: '${base}/cart/delete?ids='+id,
                        dataType: 'json',
                        success: function (resp) {
                        	 dialog.toast('已经删除了', 'none', 1000);
                        	 $this.parent().parent().parent().remove();
                        },
                        error: function (xhr, type) {
                        	alert('删除失败');
                        }
                    });
                });
            }
            var $this = $(this).parent().parent().parent().find('.radio').find('.ico_checkbox');
    		var oldNum = $this.attr("num");
            $(this).parent().parent().parent().find('.radio').find('.ico_checkbox').attr('num',num);
            if($this.hasClass('ico_checkbox_on')){
    	        $("#totalmoney").html(Number($("#totalmoney").html()) + Number($this.attr("price"))*(Number(num)-Number(oldNum)));
    	        $("#totalPay").html(Number($("#totalPay").html()) + Number($this.attr("price"))*(Number(num)-Number(oldNum)));
            }
    	}); 
    	$(this).blur(function(){
    		var num = $(this).val();
    		if(num == ''){
	    		$(this).val(1);
	    		var $this = $(this).parent().parent().parent().find('.radio').find('.ico_checkbox');
	    		var oldNum = $this.attr("num");
	            $(this).parent().parent().parent().find('.radio').find('.ico_checkbox').attr('num',1);
	            if($this.hasClass('ico_checkbox_on')){
	    	        $("#totalmoney").html(Number($("#totalmoney").html()) + Number($this.attr("price")));
	    	        $("#totalPay").html(Number($("#totalPay").html()) + Number($this.attr("price")));
	            }
    		}
    	})
    })
    
</script>

</html>
